<template>
	<view>
		<u-navbar :is-back="false" title="我发布的职位" :border-bottom="false">
			<view class="slot-wrap">
				<view class="topBox">
					<view class="left-input">

					</view>
					<view class="right-img" @click="goMessage">
						<image src="../../static/images/home/message.png" mode=""></image>
						<view class="num">
							5
						</view>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<block v-for="(item,index) in list" :key="index">
				<view class="job-item" @click="goDetails(item)">
					<view class="job-title">
						成都市招木工
					</view>
					<view class="job-text">
						木工 20名（260元/天），工作职责钉框架、之制作柜子要求从事木工相关工作经验，木工相关工作经验，年龄50岁以下，有展...
					</view>
					<view class="job-bot-box">
						<view class="botton-item" @click.stop="goEdit">
							职位修改
						</view>
						<view class="botton-item" @click.stop="goTrusteeship">
							工资托管
							<view class="right-num">
								5
							</view>
						</view>
						<view class="botton-item" @click.stop="goExamine">
							审批入职
							<view class="right-num">
								5
							</view>
						</view>
						<view class="botton-item" @click.stop="goFindUser">
							寻找工人
						</view>
					</view>
					<view class="right-text">
						已招满{{ index }}
					</view>
				</view>
			</block>
		</view>
		<view class="fixed-btn" @click="goAddJob">
			发布职位
		</view>
		<u-tabbar :list="vuex_tabbar" active-color="rgba(211,176,104,1)" inactive-color="rgba(153,153,153,1)" height="98"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[1,2,3,4]
			}
		},
		methods: {
			goMessage() {
				this.$u.route({
					url: 'pages/home/message/message',
				})
			},
			goDetails(item){
				this.$u.route({
					url: 'pages/recruit/job/detail',
				})
			},
			goEdit(){
				this.$u.route({
					url: 'pages/recruit/job/edit',
				})
			},
			goTrusteeship(){
				this.$u.route({
					url: 'pages/recruit/trusteeship/index',
				})
			},
			goExamine(){
				this.$u.route({
					url: 'pages/recruit/examine/index',
				})
			},
			goFindUser(){
				this.$u.route({
					url: 'pages/recruit/finduser/index',
				})
			},
			goAddJob(){
				this.$u.route({
					url: 'pages/recruit/job/edit',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;

		.topBox {
			width: 100%;
			display: flex;

			.left-input {
				flex: 1;
				display: flex;
			}

			.right-img {
				width: 62rpx;
				height: 68rpx;
				margin-left: 4rpx;
				position: relative;

				image {
					width: 62rpx;
					height: 68rpx;
				}

				.num {
					position: absolute;
					top: 0;
					right: -6rpx;
					width: 30rpx;
					height: 30rpx;
					background: rgba(255, 32, 32, 1);
					border-radius: 50%;
					opacity: 1;
					line-height: 30rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}

	.content {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;

		.job-item {
			margin-top: 30rpx;
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 8rpx 20rpx rgba(0, 0, 0, 0.1);
			opacity: 1;
			border-radius: 20rpx;
			position: relative;
			.job-title {
				font-size: 32rpx;
				font-weight: bold;
				line-height: 43rpx;
				color: rgba(51, 51, 51, 1);
				opacity: 1;
			}

			.job-text {
				width: 100%;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 32rpx;
				color: rgba(51, 51, 51, 1);
				opacity: 1;
				margin-top: 20rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.job-bot-box {
				width: 100%;
				display: flex;
				justify-content: space-around;
				flex-direction: row;
				flex-wrap: wrap;
				border-top: 1rpx solid rgba(223,223,223,1);
				margin-top: 20rpx;
				.botton-item{
					width:240rpx;
					height:80rpx;
					border:1rpx solid rgba(211,176,104,1);
					opacity:1;
					border-radius:8rpx;
					text-align: center;
					line-height: 80rpx;
					font-size:28rpx;
					font-weight:bold;
					color:rgba(211,176,104,1);
					margin-top: 30rpx;
					position: relative;
					.right-num{
						width:30rpx;
						height:30rpx;
						background:rgba(255,32,32,1);
						border-radius:50%;
						position: absolute;
						right: -15rpx;
						top: -15rpx;
						font-size:22rpx;
						font-weight:400;
						line-height:30rpx;
						color:rgba(255,255,255,1);
						opacity:1;
					}
				}
			}
			.right-text{
				position: absolute;
				right: 0;
				top: 0;
				background:linear-gradient(357deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
				border-radius:0px 20rpx 0px 40rpx;
				padding: 15rpx 25rpx;
				font-size:24rpx;
				font-weight:500;
				line-height:32rpx;
				color:rgba(255,255,255,1);
				opacity:1;
			}
		}
	}
	.fixed-btn{
		position: fixed;
		bottom: 148rpx;
		left: 0;
		right: 0;
		margin: auto;
		width:290rpx;
		height:90rpx;
		background:rgba(228,205,112,1);
		box-shadow:0px 10rpx 20rpx rgba(154,123,0,0.24);
		opacity:1;
		border-radius:20rpx;
		font-size:32rpx;
		font-weight:bold;
		line-height:90rpx;
		color:rgba(255,255,255,1);
		text-shadow:0px 2rpx 4rpx rgba(0,0,0,0.15);
		opacity:1;
		text-align: center;
	}
</style>
